<template>
    <div class="text-book-box">
        <div class="header" v-if="graphVisable">
            <div class="leftbtn"> 
                <el-input class="search-box" v-model="searchQuery" placeholder="请输入教材名称或ISBN码" clearable >
                    <template #prefix>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-input>
                <el-button> <el-icon><Search /></el-icon>查询 </el-button>
                <el-button> <el-icon><RefreshLeft /></el-icon>重置 </el-button>
            </div>
            <el-button class="upload-btn" type="primary" @click="handleUpload">
                <el-icon><Upload /></el-icon>
                上传书籍
            </el-button>
        </div>

        <div class="table-container" v-if="graphVisable">
            <el-table :data="filteredBooks" style="width: 100%" stripe :header-cell-style="headerCellStyle">
                <el-table-column prop="name" label="教材名称" />
                <el-table-column prop="type" label="教材/图书类型" />
                <el-table-column prop="isbn" label="ISBN码" />
                <el-table-column prop="knowledgePoints" label="知识点">
                    <template #default="scope">
                        <el-tag size="small">{{ scope.row.knowledgePoints }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="relation" label="关系">
                    <template #default="scope">
                        <el-tag type="info" size="small">{{ scope.row.relation }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <span :class="['status', scope.row.status === '已上架' ? 'status-active' : 'status-inactive']">
                        {{ scope.row.status }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <div class="operation-buttons">
                            <el-button class="knowledge-map-btn" size="small" @click="showKnowledgeMap(scope.row)" > 书籍图谱 </el-button>
                            <el-button class="delete-btn" size="small" @click="handleDelete(scope.row)" > 删除 </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <GraphView v-if="!graphVisable" />
    </div>
    <el-dialog v-model="uploadDialogVisible" title="Tips" width="40%">
        <template #header>
            <div class="my-header">
                <span>上传教材</span>
            </div>
        </template>
        <div class="quote-box">
            <div class="notification-container">
                <div class="notification-icon">
                    <el-icon color="#FA8C2A"><WarningFilled /></el-icon>
                    <span>本地选取电子版教材/图书进行上传，并自动生成教材/图书知识图谱。</span>
                    <span>支持格式：pdf,docx,txt,doc</span>
                </div>
            </div>
            <div class="quote-item">
                <el-input v-model="isbn" placeholder="请输入ISBN码" />
                <el-input v-model="bookname" placeholder="请输入教材名称" />
                <div class="quote-uploads">
                    <el-input v-model="fileName" disabled />
                    <el-upload ref="uploadRef" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :auto-upload="false" :on-change="handleFileChange" :show-file-list="false" :multiple="false">
                        <template #trigger>
                            <el-button type="primary">选择文件</el-button>
                        </template>
                    </el-upload>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="uploadDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="uploadDialogVisible = false">上传并生成图谱</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
    import GraphView from '@/components/teacher/GraphView.vue'
    import { ref, computed } from 'vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import { Search,Upload,RefreshLeft,WarningFilled } from '@element-plus/icons-vue'

    const searchQuery = ref('');
    const graphVisable = ref(false);
    const uploadDialogVisible = ref(false);

    const books = ref([
    {
        id: 1,
        name: '高等数学（第七版）',
        type: '教材',
        isbn: '9787040396638',
        knowledgePoints: '12个',
        relation: '已关联',
        status: '已上架'
    },
    {
        id: 2,
        name: '大学英语精读',
        type: '教材',
        isbn: '9787544627063',
        knowledgePoints: '8个',
        relation: '未关联',
        status: '已上架'
    },
    {
        id: 3,
        name: '计算机科学导论',
        type: '参考书',
        isbn: '9787115549445',
        knowledgePoints: '15个',
        relation: '已关联',
        status: '未上架'
    },
    {
        id: 4,
        name: '线性代数',
        type: '教材',
        isbn: '9787040371246',
        knowledgePoints: '10个',
        relation: '已关联',
        status: '已上架'
    },
    {
        id: 5,
        name: '概率论与数理统计',
        type: '教材',
        isbn: '9787040360943',
        knowledgePoints: '9个',
        relation: '未关联',
        status: '未上架'
    }
    ]);

    const filteredBooks = computed(() => {
        if (!searchQuery.value) {
            return books.value;
        }
        const query = searchQuery.value.toLowerCase();
        return books.value.filter(book => 
            book.name.toLowerCase().includes(query) || 
            book.isbn.includes(query)
        );
    });

    const handleUpload = () => {
        // ElMessage.info('上传书籍功能待实现');
        uploadDialogVisible.value = !uploadDialogVisible.value
    };

    const showKnowledgeMap = (book) => {
        ElMessage.success(`正在显示《${book.name}》的知识图谱`);
    };

    const handleDelete = (book) => {
        ElMessageBox.confirm(
            `确定要删除《${book.name}》吗？此操作不可恢复。`,
            '删除确认',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            books.value = books.value.filter(item => item.id !== book.id);
            ElMessage.success('删除成功');
        }).catch(() => {
            ElMessage.info('已取消删除');
        });
    };
    const headerCellStyle = () => {
        return { backgroundColor: '#CADFFA', color: '#000000', };
    };
</script>
<style scoped>
    .text-book-box .el-table .el-table__row:nth-child(odd) { background-color: #E9F1FC; }
    .text-book-box .el-table .el-table__row:nth-child(even) { background-color: #CADFFA; }
    .text-book-box .el-table .el-table__row:hover { background-color: #CADFFA!important; }
    .text-book-box{display: flex;flex-direction: column;justify-content: center;background: #fff;padding: 20px;}
    .header { display: flex; justify-content: space-between; align-items: center;}
    .header .leftbtn{ display: flex; justify-content: space-between; align-items: center;gap: 10px;}
    :deep(.leftbtn .el-button:hover){border: 1px solid #1465E1;color: #1465E1;}
    :deep(.is-checked .el-radio__inner){background: #1465E1;border-color: #1465E1;}
    :deep(.is-checked .el-radio__label){color: #1465E1;}
    .search-box { width: 240px; } 
    .upload-btn { background: #1465E1; border: none; }
    .table-container { margin-top: 20px; }
    .status-active { color: #67c23a; }
    .status-inactive { color: #909399; }
    .operation-buttons { display: flex; gap: 10px; }
    .knowledge-map-btn { color: #409eff; border-color: #409eff; }
    .delete-btn { color: #f56c6c; border-color: #f56c6c; }
    add-form{ width: calc(100% - 30px);margin: 10px auto;display: flex;flex-direction: row; gap: 20px; }
    .form-item{flex: 1;}
    .add-form .items{display: flex;flex-direction: row;gap: 10px;}
    .add-form .items .reds{ color: red; }
    .add-form .items .text{ font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;flex: 0 0 80px;text-align: left;text-align: right; }
    .add-form .inputs{ margin-top: 10px; }
    .notification-icon{ display: flex;flex-direction: row;justify-content: center;align-items: center;background: #FFF9ED; width: 90%;margin: 0 auto;padding: 10px;border-radius: 10px; }
    .notification-icon span{ margin-left: 5px;color: #FA8C2A; }
    .upload-demo{margin-top: 20px;}
    .quote-uploads{display: flex;flex-direction: row;width: 80%;margin: 0 auto;gap: 20px;justify-content: space-between;}
    .my-header{text-align: left;}
</style>